import React, { Component } from 'react';
import { Text, View, StyleSheet, ScrollView, SectionList } from 'react-native';
import { SearchBar, Icons } from 'bee/components/Sales';
import { px2dp } from 'bee/utils';
import { colors, sizes } from 'bee/themes';
import CustomerAcquisition from 'bee/containers/Customers/CustomerAcquisition';
import Tabs from 'bee/components/Tabs';
import Customer from 'bee/containers/Customers/Customer';
import { Icon, Names } from 'bee/components/Icon';

// import sections from '../../mock/sections.json';
import { request } from 'bee/utils/request';

export default class Customers extends Component {
  constructor() {
    super();

    this.state = {
      // 活动获客
      activityAcquisition: '',
      // 计划书获客
      planAcquisition: '',
      // 赠险获客
      forFreeAcquisition: '',
      // 销售获客
      saleAcquisition: '',
      // 项目
      items: [],
      // 全部客户列表
      allCustomerSection: [],
      // 准客户列表
      certainCustomerSection: [],
      // VIP客户列表
      VIPCustomerSection: [],
      // 派发客户列表
      distributeCustomerSection: [],
    };
  }

  componentDidMount() {
    request('/CustomerHomePage').then(data => {
      const { body } = data;
      console.log(data);
      this.setState({
        activityAcquisition: body.activityAcquisition,
        planAcquisition: body.planAcquisition,
        forFreeAcquisition: body.forFreeAcquisition,
        saleAcquisition: body.saleAcquisition,
        items: body.items,
        allCustomerSection: body.allCustomerSection,
        certainCustomerSection: body.certainCustomerSection,
        VIPCustomerSection: body.VIPCustomerSection,
        distributeCustomerSection: body.distributeCustomerSection,
      });
    });
  }

  sectionComp = info => (
    <View style={styles.sectionHeader}>
      <Text style={styles.sectionHeaderText}>{info.section.key}</Text>
    </View>
  );

  renderItem = info => (
    <Customer
      customerName={info.item.customerName}
      sex={info.item.sex}
      age={info.item.age}
      phoneNo={info.item.phoneNo}
    />
  );

  render() {
    return (
      <ScrollView>
        {/* 顶部栏 */}
        <View style={styles.topbox}>
          <Text style={styles.navigation} />
          <View style={styles.searchView}>
            <SearchBar placeholder="搜索姓名" />
            {/* <Text style={styles.serviceIcon} /> */}
            <View style={{ marginLeft: px2dp(20) }}>
              <Icon
                name={Names.zaixiankefu}
                color={colors.white}
                size={sizes.f4}
              />
            </View>
          </View>
        </View>

        {/* 获客 */}
        <View style={styles.blank}>
          <View style={styles.CAPartContainer}>
            <CustomerAcquisition
              name="活动获客"
              number={this.state.activityAcquisition}
              iconName={Names.huodong}
              iconColor="#F37936"
            />
            <CustomerAcquisition
              name="计划书获客"
              number={this.state.planAcquisition}
              iconName={Names.jihuashu}
              iconColor={colors['1001']}
            />
          </View>

          <View style={styles.CAPartContainer}>
            <CustomerAcquisition
              name="赠险获客"
              number={this.state.forFreeAcquisition}
              iconName={Names.liwu}
              iconColor="#F33E64"
            />
            <CustomerAcquisition
              name="销售获客"
              number={this.state.saleAcquisition}
              iconName={Names.xinguke}
              iconColor="#53EE3A"
            />
          </View>
        </View>

        {/* 客户中项目 */}
        <View style={styles.blank}>
          <Icons icons={this.state.items} />
        </View>

        {/* 客户列表 */}
        <View style={styles.blank}>
          <Tabs
            tabNames={['全部客户', '准客户', 'VIP客户', '派发客户']}
            containerStyle={styles.containerStyle}
            defaultTextStyle={styles.defaultTextStyle}
            selectedTextStyle={styles.selectedTextStyle}
          >
            <SectionList
              renderSectionHeader={this.sectionComp}
              sections={this.state.allCustomerSection}
              renderItem={this.renderItem}
            />

            <SectionList
              renderSectionHeader={this.sectionComp}
              sections={this.state.certainCustomerSection}
              renderItem={this.renderItem}
            />

            <SectionList
              renderSectionHeader={this.sectionComp}
              sections={this.state.VIPCustomerSection}
              renderItem={this.renderItem}
            />

            <SectionList
              renderSectionHeader={this.sectionComp}
              sections={this.state.distributeCustomerSection}
              renderItem={this.renderItem}
            />
          </Tabs>
        </View>
      </ScrollView>
    );
  }
}

// const items = [
//   { title: '我的客户', path: 'Products' },
//   { title: '我的保单', path: 'Products' },
//   { title: '拜访记录', path: 'Products' },
//   { title: '通讯录', path: 'Products' },
//   { title: '保单体检', path: 'Products' },
//   { title: '净风险', path: 'Products' },
//   { title: '服务提醒', path: 'Products' },
//   { title: '电子贺卡', path: 'Products' },
// ];

const styles = StyleSheet.create({
  topbox: {
    height: px2dp(128),
    backgroundColor: colors['1001'],
  },
  navigation: {
    height: px2dp(53),
  },
  searchView: {
    paddingLeft: px2dp(80),
    paddingRight: px2dp(60),
    flexDirection: 'row',
    alignItems: 'center',
  },
  serviceIcon: {
    marginLeft: px2dp(19),
    fontFamily: 'iconfont',
    fontSize: px2dp(36),

    // 以下临时
    width: px2dp(36),
    height: px2dp(36),
    backgroundColor: '#efa',
  },
  blank: {
    marginTop: px2dp(20),
  },
  CAPartContainer: {
    flexDirection: 'row',
  },
  containerStyle: {
    height: px2dp(80),
    alignItems: 'center',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
    backgroundColor: colors.white,
  },
  defaultTextStyle: {
    fontSize: sizes.f2,
    color: colors['1101'],
  },
  selectedTextStyle: {
    fontSize: sizes.f3,
    color: colors['1001'],
  },
  sectionHeader: {
    height: px2dp(32),
    justifyContent: 'center',
  },
  sectionHeaderText: {
    fontSize: sizes.f1,
    color: colors['1101'],
    marginLeft: px2dp(30),
  },
});
